import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home/Home.vue'
import Index from "../views/Index/Index";
import axios from "../axios";
import store from "../store"


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/index',
        name: 'Index',
        component: Index
      },
      {
        path: '/userCenter',
        name: 'UserCenter',
        meta: {
          title: "个人中心"
        },
        component: () => import('@/views/sys/UserCenter.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login/Login.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


router.beforeEach((to, from, next) => {

  let hasRoute =store.state.menus.hasRoutes
  //1
  let token = localStorage.getItem("token")

  if (to.path == '/login') {
    next()

  } else if (!token) {
    next({path: '/login'})


  } else if(token && !hasRoute) {
    axios.get("/sys/menu/nav", {
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {

 /* if (!hasRoute){
  //因为是全局拦截axios请求  这里单独导入了axios请求 所以加上请求头
  axios.get('/sys/menu/nav',{
    headers : {
      Authorization: localStorage.getItem('token')
    }
  }).then(res =>{*/


    //拿到menulist
    store.commit("setMenuList",res.data.data.nav)
    //拿到用户权限
    store.commit("setPermList",res.data.data.authoritys)

    //动态绑定路由
    //获取路由
    let newRoutes =router.options.routes

    res.data.data.nav.forEach(menu =>{
        if (menu.children){
            menu.children.forEach(e =>{
              //转成路由
              let route =menuToRoute(e)

              //把路由添加到路由管理中
              if (route){
                newRoutes[0].children.push(route)

              }
            })
        }
    })
    router.addRoutes(newRoutes)

    hasRoute =true
    store.commit("changeRouteStatus",hasRoute)
  })
  }
  next()

})

//导航转成路由
const menuToRoute= (menu) =>{

    if (!menu.component){
      return null
    }
    let route ={
      name  :  menu.name,
      path  :  menu.path,
      //路由额外值的赋值
      meta: {
        icon  :  menu.icon,
        title : menu.title,
      },
      component: () => import('../views'+menu.component+'.vue'),
    }
    return route

}


export default router

